<template>
        <view>
            <!-- 公共组件-每个页面必须引入 -->
            <public-module></public-module>
            <wlk-navbar title="绑定手机号" navbarType='0'></wlk-navbar>

            <view class="bind-content br08">
               <u-form :rules="rules" :labelStyle="{fontSize:'40rpx'}" :model="form" ref="uForm" labelPosition="top" labelWidth="100" :borderBottom="false">
                    <u-form-item
                            prop="mobile"
                    >
                        <u--input
                                type="number"
                                clearable
                                v-model="form.mobile"
                                border="none"
                                placeholder="请输入手机号"
                        ></u--input>
                    </u-form-item>
                </u-form>
            </view>
            <!-- #ifdef MP-WEIXIN -->
                <button class="wx-btn" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
                    <u-icon space="12" labelPos="bottom" label="微信手机号授权" name="weixin-circle-fill" color="#0cb955" size="50"></u-icon>
                </button>
            <!-- #endif -->
            <view class="wlk-fixed-btn">
                <u-button :customStyle="{
                    fontWeight: 'bold',
			        borderRadius:'8px',
			          width:'92%'
                }" :disabled="!form.mobile"  :color="themeColor" size="large" @click="jump('/pages/user/checkcode')" text="下一步"></u-button>
            </view>
        </view>
</template>

<script>
    var _self;
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
    import { toUrl } from '@/wlkutils/tools';
    export default {
        data() {
            return {
                form: {
                    mobile:''
                },
                rules: {

                }
            }
        },
        onLoad(e){
            _self = this;
        },
        onReady() {

        },
        computed: {
            ...mapGetters(['userInfo','themeColor'])
        },
        methods: {
            ...mapActions(["getUserInfo"]),
            jump(url){
                if(!uni.$u.test.isEmpty(this.userInfo.mobile)){
                    url+='?event=changemobile&mobile='+this.form.mobile;
                    toUrl(url);
                }else{
                    this.$u.toast('请先绑定手机号');
                }
            },
            decryptPhoneNumber(e) {
                if(e.detail.errMsg == 'getPhoneNumber:ok'){
                    if(e.detail.iv){
                        uni.$u.http.post('user/getPhoneNumber', {
                            code: e.detail.code,
                            encrypted_data: e.detail.encryptedData,
                            iv: e.detail.iv,
                        }).then(res => {
                            _self.getUserInfo();
                            uni.$u.toast(res.msg);
                            setTimeout(function () {
                                toUrl('/pages/index/user');
                            },1000)
                        })
                    }else{
                        this.$u.toast('获取手机号失败');
                    }
                }else{
                    return false;
                }
            },
        }
    }
</script>

<style lang="scss" >
    .title{
        font-size: 50rpx;
        font-weight: bold;
    }
    .bind-content{
        width: 92%;
        padding: 30rpx 30rpx;
        background-color: #FFFFFF;
        margin: 40% auto 0 auto;
        box-shadow: 0 2px 4px rgba(0,0,0,.02);
    }
    .wx-btn{
        width: 30%;
        margin-top: 40rpx;
    }
    .wlk-fixed-btn{
        box-shadow: 0px -5px 5px rgba(0, 0, 0, 0);
        background-color: transparent;
    }
</style>




